<template>
  <div class="todo-list">
    <div v-if="todos.length === 0" class="empty-state">
      <p>🎉 没有待办任务</p>
      <p class="empty-hint">添加一些任务开始你的计划吧！</p>
    </div>
    
    <transition-group name="todo" tag="div">
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @toggle-todo="$emit('toggle-todo', todo.id)"
        @delete-todo="$emit('delete-todo', todo.id)"
        @edit-todo="$emit('edit-todo', todo.id, $event)"
      />
    </transition-group>
  </div>
</template>

<script setup>
import TodoItem from './TodoItem.vue'

defineProps({
  todos: {
    type: Array,
    default: () => []
  }
})

defineEmits(['toggle-todo', 'delete-todo', 'edit-todo'])
</script>